<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="../js/layui/layui.js" ></script>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script type="text/javascript" src="../js/axios.js" ></script>
		<script type="text/javascript" src="../js/getParameter.js" ></script>
		<link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body>
	<div id="app">
		<main>
			<section class="buyTicket picBg">
				<div class="container">
					<ul class="list whiteBg radius20 pad30">
						<li class="listItem clearfix" v-for="map in powerList">
							<div class="icon iconCR"></div>
							<div class="text">
								<h6 class="name">{{map.manager.managername}}</h6>
								<div >
									权限等级:
									<span v-show="editState==0">{{map.managerPower.powerlevel}}</span>
									<select v-show="editState==1" v-model="map.managerPower.powerlevel">
										<option>1</option>
										<option>2</option>
									</select>
									<div>
										(
										<span v-show="map.managerPower.powerlevel>0">可以核销票</span>
										<span v-show="map.managerPower.powerlevel>1">、可以修改或发布售票信息</span>
										)
									</div>
								</div>
							</div>
							<a class="buy" @click="removePower(map.managerPower.id)">移除权限</a>
						</li>
					</ul>
					<div id="test1" style="text-align: center"></div>
				</div>
				<div id="addMsg">

				</div>
				<div style="text-align: center">
					<button style="width: 100px;height: 50px" v-show="addState==0" @click="addPower">新增店员</button>
					<button style="width: 100px;height: 50px" v-show="addState==1" @click="addPower">提交</button>
				</div>

				<div class="asideBox">
					<div class="container">
						<a class="asideBtn" @click="editPower" v-show="editState==0">修改权限</a>
						<a class="asideBtn" @click="editPower" v-show="editState==1">保存修改</a>
					</div>
				</div>
			</section>
		</main>
	</div>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
	</body>
<script>
	let aid = getParameter("aid");
	if (aid===null) location.href = "/managerclient/myGymList.html"
	const app = new Vue({
		el:"#app",
		data:{
			powerList:[],
			editState:0,
			addState:0
		},
		methods:{
			loadPowerList(){
				axios.get("/activity/findPower/"+aid).then(function (res) {
					if (res.data==="") location.href = "/managerclient/myGymList.html";
					else app.powerList = res.data
				})
			},
			editPower(){
				if (this.editState===0){
					this.editState = 1
				}else{
					axios.post("/gym/updatePower",{
						powerList:app.powerList
					}).then(function (res) {
						if (res.data==="success") layer.msg("修改成功")
						else layer.msg("修改失败")
						app.loadPowerList()
					})
					this.editState = 0
				}
			},
			removePower(mpid){
				axios.delete("/gym/removePower/"+mpid).then(function (res) {
					if (res.data==="success"){
						layer.msg("移除成功")
					}else layer.msg("移除失败")
					app.loadPowerList()
				})
			},
			addPower(){
				if (this.addState===0){
					this.addState = 1
					$("#addMsg").html("店员账号:\n" +
							"\t\t\t\t\t<input type=\"text\" id='addName'>\n" +
							"\t\t\t\t\t权限等级:\n" +
							"\t\t\t\t\t<select id='addPower'>\n" +
							"\t\t\t\t\t\t<option>1</option>\n" +
							"\t\t\t\t\t\t<option>2</option>\n" +
							"\t\t\t\t\t</select>")
				}else{
					if ($("#addName").val()==="") layer.msg("请输入店员账号")
					else{
						axios.post("/gym/addPower",{
							addName:$("#addName").val(),
							addPower:$("#addPower").val(),
							addType:0,
							addPowerId:aid
						}).then(function (res) {
							if (res.data==="success"){
								layer.msg("授权成功")
								$("#addMsg").html("")
								app.addState = 0
								app.loadPowerList()
							}else{
								layer.msg(res.data)
							}
						})

					}
				}
			}
		},
		created(){
			this.loadPowerList();
		}
	})
</script>
</html>